import React, { Component } from 'react';
import GoBack from "@/components/TheGoBack";
import TheImage from "@/components/TheImage";
import { Typography, Descriptions, Table } from "antd";
import '../style/index.less'
import { goodsClassifyTree, storeServiceLabelList, storeInfoDetailsPage } from "@/request/storeBackManage/storeManage/storeLists.js"

const { Paragraph } = Typography;
class Add extends Component {
  constructor(props) {
    super(props);
    this.state = {
      adminInfo: {},//管理员信息
      salesReturnAddress: {},//售后地址信息
      financeInfo: {},//财务信息
      serviceLabelList: [],//门店标签数据
      columns: [
        {
          title: '类目',
          dataIndex: 'label',
          key: 'label',
        },
        {
          title: '别名',
          dataIndex: 'alias',
          key: 'alias',
          width: '12%',
        },
        {
          title: '抽佣比例（%）',
          dataIndex: 'commissionRatio',
          width: '30%',
          key: 'commissionRatio',
          render: (text, record, index) => {
            if (record.children === null) {
              return text
            } else {
              return '-'
            }
          }
        },
      ],
      dataSource: [],
      storeInfo: {}, //基本信息
      storeId: this.props.match.params.id,
    };
  }

  componentDidMount = () => {
    let { id } = this.props.match.params
    if (id) {
      this.goodsClassifyData()
      this.getSoreServiceList()
      this.getData(id)
    }

  }
  // 数据回显处理
  getData = async (storeId) => {
    await storeInfoDetailsPage({ storeId }).then(res => {
      if (res.code === 0 && res.data) {
        let storeInfo = res.data.storeInfo //基本信息
        let adminInfo = res.data.adminInfo //管理员信息
        let salesReturnAddress = res.data.salesReturnAddress //售后地址
        let financeInfo = res.data.financeInfo //财务信息
        let isProprietary = ''
        switch (storeInfo.isProprietary) {
          case 'Y':
            isProprietary = '自营'
            break
          case 'N':
            isProprietary = '非自营'
            break
          default:
            isProprietary = ''
        }
        let businessCategory = ''
        switch (storeInfo.businessCategory) {
          case '0':
            businessCategory = '实体门店'
            break
          case '1':
            businessCategory = '酒店'
            break
          case '2':
            businessCategory = '医院'
            break
          case '3':
            businessCategory = '上门服务'
            break
          case '4':
            businessCategory = '线上店铺'
            break
            break
          default:
            businessCategory = ''
        }
        let defaultServiceLabel = []
        let serviceLabel = storeInfo.serviceLabelIds !== null ? storeInfo.serviceLabelIds.split(',') : []
        this.state.serviceLabelList.map(item => {
          serviceLabel.map(v => {
            if (v === item.value) {
              defaultServiceLabel.push(item.label)
            }
          })
        })
        let address = ''
        if (salesReturnAddress) {
          address = salesReturnAddress.addressProvince + salesReturnAddress.addressCity + salesReturnAddress.addressDistrict
        }
        salesReturnAddress = {
          ...salesReturnAddress,
          address: address,
        }
        let storeEnvironment = storeInfo.storeEnvironment ? storeInfo.storeEnvironment.split(',') : []
        //回显抽佣比例
        let arr = this.state.dataSource
        this.recursive(arr, res.data.financeInfo.storeCommissionList);
        console.log(arr)
        this.setState({
          dataSource: [...arr]
        })
        storeInfo.isProprietary = isProprietary
        storeInfo.businessCategory = businessCategory
        storeInfo.serviceLabelIds = defaultServiceLabel
        storeInfo.storeEnvironment = storeEnvironment
        this.setState({
          storeInfo,
          adminInfo,
          financeInfo,
          salesReturnAddress,
        })
      }
    })
  }
  recursive = (arr, data) => {
    // 遍历数组
    for (let i = 0; i < arr.length; i++) {
      const item = arr[i];

      // 判断是否满足条件
      if (item.children === null) {
        // 查找与当前 item.value 相匹配的 data 对象
        const matchingData = data.find(d => d.goodsClassifyId === item.value);
        if (matchingData) {
          // 将对应的 number 值添加到 arr
          if (matchingData.commissionRatio !== null) {
            item.commissionRatio = matchingData.commissionRatio / 100;
          }
          item.storeCommissionId = matchingData.storeCommissionId
        }
      }
      // 递归处理子数组
      if (item.children) {
        this.recursive(item.children, data);
      }
    }
  }
  // 门店标签
  getSoreServiceList = async () => {
    await storeServiceLabelList().then(res => {
      if (res.code === 0 && res.data) {
        let data = res.data.map(v => {
          return {
            value: v.serviceLabelId,
            label: v.storeServiceName
          }
        })
        this.setState({ serviceLabelList: data })
      }
    })
  }
  // 商品类目
  goodsClassifyData = async () => {
    await goodsClassifyTree().then(res => {
      if (res.code === 0) {
        this.setState({ dataSource: res.data })
      }
    })
  }

  render() {
    let {
      columns,
      dataSource,
      storeInfo,
      adminInfo,
      financeInfo,
      salesReturnAddress,
    } = this.state;
    const storeEnvironment = storeInfo.storeEnvironment && storeInfo.storeEnvironment.map(item => {
      return <TheImage src={item} width={80} height={80}></TheImage>
    })
    return (
      <div className={"p-layout-box commodity-content"}>
        <GoBack history={this.props.history} title={"查看商家"} />
        <div className={'goods-view'}>
          <Paragraph strong={true}>
            <pre>基础信息</pre>
          </Paragraph>
          <Descriptions column={1}>
            <Descriptions.Item label="商家名称">{storeInfo.storeName}</Descriptions.Item>
            <Descriptions.Item label="类型">{storeInfo.isProprietary}</Descriptions.Item>
            <Descriptions.Item label="经营类目">{storeInfo.businessCategory}</Descriptions.Item>
            <Descriptions.Item label="店铺logo">
              {storeInfo.storeLogo && <TheImage src={storeInfo.storeLogo} width={80} height={80}></TheImage>}
            </Descriptions.Item>
            <Descriptions.Item label="营业执照">
              {storeInfo.businessLicense && <TheImage src={storeInfo.businessLicense} width={80} height={80}></TheImage>}
            </Descriptions.Item>
            <Descriptions.Item label="法人身份证正反面">
              {storeInfo.corporateIdentityCardPositive && <TheImage src={storeInfo.corporateIdentityCardPositive} width={80} height={80}></TheImage>}
              {storeInfo.corporateIdentityCardBack && <TheImage src={storeInfo.corporateIdentityCardBack} width={80} height={80}></TheImage>}
            </Descriptions.Item>
          </Descriptions>
          {
            storeInfo.businessCategory !== '线上店铺' &&
            <Descriptions column={1}>
              <Descriptions.Item label="门店标签">{storeInfo.serviceLabelIds}</Descriptions.Item>
              <Descriptions.Item label="营业时间">{storeInfo.storeOpenTime}-{storeInfo.storeCloseTime}</Descriptions.Item>
              <Descriptions.Item label="门店图片">
                {storeInfo.storeShowFile && <TheImage src={storeInfo.storeShowFile} width={80} height={80}></TheImage>}
              </Descriptions.Item>
              <Descriptions.Item label="店铺环境">
                {storeInfo.storeEnvironment && storeInfo.storeEnvironment.map(item => {
                  return <TheImage src={item} width={80} height={80}></TheImage>
                })}
              </Descriptions.Item>
              <Descriptions.Item label="门店地址">{storeInfo.addressMapLocation ? storeInfo.addressMapLocation : ''}</Descriptions.Item>
              <Descriptions.Item label="经度">{storeInfo.addressLnt ? storeInfo.addressLnt : ''}</Descriptions.Item>
              <Descriptions.Item label="纬度">{storeInfo.addressLat ? storeInfo.addressLat : ''}</Descriptions.Item>
              <Descriptions.Item label="详细地址(选填)">{storeInfo.addressDetail ? storeInfo.addressDetail : ''}</Descriptions.Item>
              {/* {
                storeInfo.isProprietary==='非自营'&& <Descriptions.Item label="订单回调地址">{storeInfo.orderNotifyUrl ? storeInfo.orderNotifyUrl : ''}</Descriptions.Item>
              } */}
             

            </Descriptions>
          }
          {
            storeInfo.businessCategory === '线上店铺' &&
            <Descriptions column={1}>
              <Descriptions.Item label="是否分账">{storeInfo.openCommission ? '是' : '否'}</Descriptions.Item>
              {
                storeInfo.isProprietary==='非自营'&& <Descriptions.Item label="订单回调地址">{storeInfo.orderNotifyUrl ? storeInfo.orderNotifyUrl : ''}</Descriptions.Item>
              }
            </Descriptions>
          }
          <Paragraph strong={true}>
            <pre>管理员信息</pre>
          </Paragraph>
          <Descriptions column={1}>
            <Descriptions.Item label="联系人">{adminInfo.storeContacts}</Descriptions.Item>
            <Descriptions.Item label="联系电话">{adminInfo.userMobile}</Descriptions.Item>
            <Descriptions.Item label="管理员账号">{adminInfo.loginName}</Descriptions.Item>
            <Descriptions.Item label="管理员姓名"> {adminInfo.userName}</Descriptions.Item>
            <Descriptions.Item label="管理员手机号">{adminInfo.adminMobile}</Descriptions.Item>
          </Descriptions>
          {
            storeInfo.businessCategory === '线上店铺' && <div>
              <Paragraph strong={true}>
                <pre>售后地址管理</pre>
              </Paragraph>
              <Descriptions column={1}>
                <Descriptions.Item label="收件人">{salesReturnAddress && salesReturnAddress.hasOwnProperty('addresseeName') ? salesReturnAddress.addresseeName : ""}</Descriptions.Item>
                <Descriptions.Item label="联系电话">{salesReturnAddress && salesReturnAddress.hasOwnProperty('addresseeMobile') ? salesReturnAddress.addresseeMobile : ""}</Descriptions.Item>
                <Descriptions.Item label="省市区"> {salesReturnAddress.address} </Descriptions.Item>
                <Descriptions.Item label="详细地址">{salesReturnAddress && salesReturnAddress.hasOwnProperty('addressDetail') ? salesReturnAddress.addressDetail : ""}</Descriptions.Item>
              </Descriptions>
            </div>
          }

          <Paragraph strong={true}>
            <pre>财务信息</pre>
          </Paragraph>
          <Descriptions column={1}>
            <Descriptions.Item label="账户名称(支付宝)">{financeInfo && financeInfo.hasOwnProperty('alipayAccountName') ? financeInfo.alipayAccountName : ''}</Descriptions.Item>
            <Descriptions.Item label="收款账户(支付宝)">{financeInfo && financeInfo.hasOwnProperty('alipayAccount') ? financeInfo.alipayAccount : ''}</Descriptions.Item>
            <Descriptions.Item label="抽佣比例">
              <Table
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                scroll={{ y: 500 }}
                rowKey={'value'}
              />
            </Descriptions.Item>
          </Descriptions>
        </div>

      </div >
    );
  }
}

export default Add;
